<template>
  <div class="app-container">
    <div class="anniu">
      <el-row>
        <el-button @click="toBack">返回</el-button>
        <el-button v-print="'#printTest'" type="primary">打印</el-button>
        <!-- <el-button type="primary" @click="toExcel">导出</el-button> -->
        <!-- <el-pagination
          style="float:right;"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="1"
          layout="prev, pager, next, jumper"
          :total="10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        /> -->
      </el-row>
    </div>
    <div id="printTest" class="ful">
      <h2 style="text-align:center">辅料库存表</h2>
      <table>
        <tr>
          <td>供应商</td>
          <td>领料人</td>
          <td>日期</td>
          <td>开单员</td>
          <td>品名规格</td>
          <td>单位</td>
          <td>数量</td>
          <td>单价</td>
          <td>金额</td>
        </tr>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.supplierId }}</td>
          <td>{{ item.pickingPeople }}</td>
          <td style="width:400px">{{ item.date }}</td>
          <td>{{ item.partOrder }}</td>
          <td>{{ item.specifications }}</td>
          <td>{{ item.unit }}</td>
          <td>{{ item.number }}</td>
          <td>{{ item.perPrice }}</td>
          <td>{{ item.money }}</td>
        </tr>
      </table>
      <!-- <div class="h" />
      <el-table
        :data="tableData"
        border
        highlight-current-row

        style="width:60%,margin-top:20px"
      >
        <el-table-column
          prop="supplierId"
          label="供应商"
        />
        <el-table-column
          prop="pickingPeople"
          label="领料人"
        />
        <el-table-column
          prop="date"
          label="日期"
        />
        <el-table-column
          prop="specifications"
          label="品名规格"
        />
        <el-table-column
          prop="unit"
          label="单位"
        />
        <el-table-column
          prop="number"
          label="数量"
        />
        <el-table-column
          prop="perPrice"
          label="单价"
        />
        <el-table-column
          prop="money"
          label="金额"
        />
      </el-table> -->
    </div>
  </div>
</template>
<script>
// accessories  means
import { export2Excel } from '@/utils/common'
// import { getUser } from '@/api/accessories/means'

export default {
  name: 'Printing',
  inject: ['closeTag'],
  data() {
    return {
      tableData: [],
      supplierId: '',
      specifications: '',
      company: '',
      number: '',
      data: []
    }
  },
  created() {
    this.tableData = [this.$route.query.data]
    console.log(this.tableData)
  },
  methods: {
    // 返回
    toBack() {
      this.$router.push('/accessories/stock')
      // this.closeTag()
    },

    toExcel() {
      var list = this.tableData
      const th = ['领料人', '领料人', '品名规格', '单位', '数量']
      const filterVal = ['code', 'collector', 'specifications', 'company', 'umber']
      const data = list.map(v => filterVal.map(k => v[k]))
      export2Excel(th, data, '辅料库存表')
    }
  }

}
</script>
<style lang="scss" scoped>
.h{
 margin-bottom: 20px;
}

table,tr,td{
  border:1px solid black;
}
table{
  margin: 0 auto;
  width:900px;
  border-collapse:collapse;
  height: auto;
}
tr{
  height: 35px;
}
table td{
  height: 35px;
}
td{
  width: 180px;
  text-align: center ;
  padding-left:15px;
}

</style>
<style media="print">
  body {
    border: solid 1px #ffffff;
    margin:0;
  }
</style>
